
import React from 'react';

import Button from 'bee-button';
import 'bee-button/build/Button.css';

import cloneDeep from 'lodash.clonedeep';

import './index.less'
class ButtonGroup extends React.Component {
    static defaultProps = {
        btnTpl: { 'browse': [] },
    };
    constructor(props) {
        super(props);
        this.state = {
            status: 'browse',
            btnTpl: cloneDeep(props.btnTpl)
        };
        this.output = {
            setButtonState: this.setButtonState,
            setButtonDisable: this.setButtonDisable,
            setButtonInvisible: this.setButtonInvisible,
        }
    }
    componentDidMount() {

    }

    componentWillUnmount() {


    }

    render() {
        let { btnTpl } = this.state;
        return (
            <div className="btn-box">
                {
                    Array.isArray(btnTpl[this.state.status]) && btnTpl[this.state.status].map(this.renderItemButton)
                }
            </div>
        )
    }
    getButtonParams = (item) => {
        let btnParams = {}
        if (item.colors) {
            btnParams['colors'] = item.colors
        } else {
            btnParams['bordered'] = true
        }
        if (item.disabled) {
            btnParams.disabled = true
        } else {
            btnParams.disabled = false
        }
        return btnParams
    }
    renderItemButton = (item) => {
        if(item.inVisible){
            return null;
        }
        let { buttonClick, ...others } = this.props;
        let btnParams = this.getButtonParams(item)
        if (item.key === 'refresh') {
            return <Button {...btnParams}
                className="refresh_btn"
                onClick={() => {
                    buttonClick && buttonClick({ key: item.key })
                }} {...others}>
                <svg
                    t="1586888712882"
                    className="svg_refresh"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="7639"
                    width="200"
                    height="200"
                >
                    <path d="M907.378688 317.76768L763.06295467 90.88314027c-5.14348373-8.0838656-14.27264853-12.75767467-23.8419968-12.4092416-9.58900907 0.40850773-18.26051413 5.90042453-22.6852864 14.43211946L683.39411627 156.4672l-5.25817174 10.08052907-2.83989333 5.44494933c-52.8515072-25.80916907-112.23913813-40.30354773-175.01607253-40.30354773-220.5646848 0-399.3665536 178.80296107-399.3665536 399.3665536S279.71638613 930.42223787 500.27997867 930.42223787c185.0507264 0 340.69763413-125.861888 386.02560853-296.64761174 5.45041067-20.74978987-6.95227733-41.98782293-27.7020672-47.4382336-20.74978987-5.45041067-41.98782293 6.95227733-47.4382336 27.7020672-36.5953024 137.4552064-161.9034112 238.731264-310.88421547 238.731264-177.67683413 0-321.71185493-144.0350208-321.71185493-321.71185493s144.0350208-321.71185493 321.71185493-321.71185493c49.81828267 0 96.97798827 11.34646613 139.07285334 31.55995306l-3.56406614 6.83431254-2.63017813 5.0429952-37.90493013 72.69143893a26.78019413 26.78019413 0 0 0-7.176192 18.27034453c0 15.0110208 15.0011904 26.61307733 27.410432 26.88177494h0.56797866c0.38884693 0 0.7569408 0 1.14578774-0.0196608L885.850112 359.071744c9.568256-0.41833813 18.23976107-5.91025493 22.675456-14.43211947 4.44552533-8.51203413 3.98677333-18.74875733-1.14688-26.87194453z" fill="#212121" p-id="7640"></path>
                </svg>
            </Button>
        }
        return <Button {...btnParams} onClick={() => {
            buttonClick && buttonClick({ key: item.key })
        }} {...others}>{item.name}</Button>
    }
    setButtonState = (status) => {
        this.setState({
            status
        })
    }
    setButtonDisable = (buttonKey, disabled) => {
        let { btnTpl } = this.state;
        Object.keys(btnTpl).forEach((item) => {
            btnTpl[item].forEach((itemButton) => {
                if (Array.isArray(buttonKey) && buttonKey.includes(itemButton.key)) {
                    itemButton.disabled = disabled
                } else if (buttonKey === itemButton.key) {
                    itemButton.disabled = disabled
                } 
            })
        })
        this.setState({
            btnTpl
        })
    }

    setButtonInvisible = (buttonKey, inVisible) => {
        let { btnTpl } = this.state;
        Object.keys(btnTpl).forEach((item) => {
            btnTpl[item].forEach((itemButton) => {
                if (Array.isArray(buttonKey) && buttonKey.includes(itemButton.key)) {
                    itemButton.inVisible = inVisible;
                } else if (buttonKey === itemButton.key) {
                    itemButton.inVisible = inVisible;
                } 
            })
        })
        this.setState({
            btnTpl
        })
    }
}



function YGCreateButton(params) {
    return <ButtonGroup
        ref={child => this.button = child}
        {...params}
    />
}

export default YGCreateButton;